<template>
  <el-drawer
    :title="drawerTitle"
    :visible.sync="visible"
    direction="rtl"
    size="80%"
    :before-close="handleClose"
  >
    <div class="drawer-content">
      <!-- 汇总信息 -->
      <el-card class="summary-info" shadow="never">
        <div slot="header" class="clearfix">
          <span style="font-weight: bold;">汇总信息</span>
        </div>
        <el-row :gutter="20">
          <el-col :span="6">
            <div class="info-item">
              <span class="label">器具型号：</span>
              <span class="value">{{ summaryInfo.materialCode }}</span>
            </div>
          </el-col>
          <el-col :span="6">
            <div class="info-item">
              <span class="label">型号名称：</span>
              <span class="value">{{ summaryInfo.materialName }}</span>
            </div>
          </el-col>
          <el-col :span="6">
            <div class="info-item">
              <span class="label">所在库房：</span>
              <span class="value">{{ summaryInfo.warehouseName || '-' }}</span>
            </div>
          </el-col>
          <el-col :span="6">
            <div class="info-item">
              <span class="label">器具状态：</span>
              <el-tag
                :type="getLocationStatusTag(summaryInfo.locationStatus)"
                size="small"
              >
                {{ getLocationStatusName(summaryInfo.locationStatus) }}
              </el-tag>
            </div>
          </el-col>
        </el-row>
        <el-row :gutter="20" style="margin-top: 10px;">
          <el-col :span="6">
            <div class="info-item">
              <span class="label">所属项目：</span>
              <span class="value">{{ summaryInfo.projectCode || '-' }}</span>
            </div>
          </el-col>
          <el-col :span="6">
            <div class="info-item">
              <span class="label">项目名称：</span>
              <span class="value">{{ summaryInfo.projectName || '-' }}</span>
            </div>
          </el-col>
          <el-col :span="6">
            <div class="info-item">
              <span class="label">器具数量：</span>
              <span class="value" style="color: #409EFF; font-weight: bold;">{{ summaryInfo.containerCount }}</span>
            </div>
          </el-col>
        </el-row>
      </el-card>

      <!-- 器具列表 -->
      <div style="margin-top: 20px;">
        <div style="margin-bottom: 16px; font-size: 16px; font-weight: bold; color: #303133;">
          器具列表
        </div>
        <el-table
          :data="containerList"
          :loading="containerLoading"
          border
          stripe
          style="width: 100%"
        >
            <el-table-column label="序号" width="50" align="center">
              <template slot-scope="scope">
                {{ (containerQueryParams.pageNum - 1) * containerQueryParams.pageSize + scope.$index + 1 }}
              </template>
            </el-table-column>
            <el-table-column label="器具编码" prop="containerCode" align="center" min-width="120" />
            <el-table-column label="生产日期" prop="productionDate" align="center" width="100" />
            <el-table-column label="业务状态" align="center" width="100">
              <template slot-scope="scope">
                <el-tag
                  :type="getBusinessStatusTag(scope.row.businessStatus)"
                  size="small"
                >
                  {{ getBusinessStatusName(scope.row.businessStatus) }}
                </el-tag>
              </template>
            </el-table-column>
            <el-table-column label="装箱状态" align="center" width="100">
              <template slot-scope="scope">
                <el-tag
                  :type="getPackingStatusTag(scope.row.packingStatus)"
                  size="small"
                >
                  {{ getPackingStatusName(scope.row.packingStatus) }}
                </el-tag>
              </template>
            </el-table-column>
            <el-table-column label="当前装载物料" align="center" min-width="120">
              <template slot-scope="scope">
                <div v-if="scope.row.currentMaterialCode">
                  <div>{{ scope.row.currentMaterialCode }}</div>
                  <div style="color: #909399; font-size: 12px;">{{ scope.row.currentMaterialName }}</div>
                </div>
                <span v-else style="color: #C0C4CC;">-</span>
              </template>
            </el-table-column>
            <el-table-column label="最后上报时间" prop="lastUploadTime" align="center" width="150" />
          </el-table>

          <!-- 分页 -->
          <pagination
            v-show="containerTotal > 0"
            :total="containerTotal"
            :page.sync="containerQueryParams.pageNum"
            :limit.sync="containerQueryParams.pageSize"
            @pagination="getContainerList"
            style="margin-top: 20px;"
          />
        </div>
    </div>
  </el-drawer>
</template>

<script>
import { getContainerSummaryDetail } from '@/api/pack/container'

export default {
  name: 'ContainerDetailDrawer',
  props: {
    visible: {
      type: Boolean,
      default: false
    },
    summaryInfo: {
      type: Object,
      default: () => ({})
    }
  },
  data() {
    return {
      // 器具列表相关
      containerList: [],
      containerTotal: 0,
      containerLoading: false,
      containerQueryParams: {
        pageNum: 1,
        pageSize: 10
      }
    }
  },
  computed: {
    drawerTitle() {
      return `器具详情 - ${this.summaryInfo.materialCode || ''}`
    }
  },
  watch: {
    visible(val) {
      if (val) {
        this.resetParams()
        this.getContainerList()
      }
    }
  },
  methods: {
    /** 重置查询参数 */
    resetParams() {
      this.containerQueryParams = {
        pageNum: 1,
        pageSize: 10
      }
      this.containerList = []
      this.containerTotal = 0
    },
    /** 获取器具列表 */
    getContainerList() {
      this.containerLoading = true

      // 构建查询参数，确保所有条件都传递
      const params = {
        ...this.containerQueryParams
      }

      // 只传递有值的参数
      if (this.summaryInfo.materialCode) {
        params.materialCode = this.summaryInfo.materialCode
      }
      if (this.summaryInfo.warehouseId) {
        params.currentWarehouseId = this.summaryInfo.warehouseId
      }
      if (this.summaryInfo.projectId) {
        params.currentProjectId = this.summaryInfo.projectId
      }
      if (this.summaryInfo.locationStatus) {
        params.locationStatus = this.summaryInfo.locationStatus
      }

      getContainerSummaryDetail(params).then(response => {
        this.containerList = response.rows || []
        this.containerTotal = response.total || 0
        this.containerLoading = false
      }).catch(error => {
        this.$modal.msgError('获取器具详情失败')
        this.containerLoading = false
      })
    },
    /** 关闭抽屉 */
    handleClose() {
      this.$emit('update:visible', false)
    },
    /** 获取位置状态名称 */
    getLocationStatusName(status) {
      const statusMap = {
        '1': '在库',
        '2': '在途'
      }
      return statusMap[status] || '未知'
    },
    /** 获取位置状态标签样式 */
    getLocationStatusTag(status) {
      const tagMap = {
        '1': 'success',
        '2': 'warning'
      }
      return tagMap[status] || ''
    },
    /** 获取业务状态名称 */
    getBusinessStatusName(status) {
      const statusMap = {
        '1': '正常',
        '2': '封存',
        '3': '维修',
        '4': '报废'
      }
      return statusMap[status] || '未知'
    },
    /** 获取业务状态标签样式 */
    getBusinessStatusTag(status) {
      const tagMap = {
        '1': 'success',
        '2': 'info',
        '3': 'warning',
        '4': 'danger'
      }
      return tagMap[status] || ''
    },
    /** 获取装箱状态名称 */
    getPackingStatusName(status) {
      const statusMap = {
        '1': '空箱',
        '2': '满箱'
      }
      return statusMap[status] || '未知'
    },
    /** 获取装箱状态标签样式 */
    getPackingStatusTag(status) {
      const tagMap = {
        '1': 'info',
        '2': 'primary'
      }
      return tagMap[status] || ''
    }
  }
}
</script>

<style scoped>
.drawer-content {
  padding: 20px;
}

.summary-info {
  margin-bottom: 20px;
}

.info-item {
  margin-bottom: 10px;
}

.info-item .label {
  color: #606266;
  font-weight: normal;
}

.info-item .value {
  color: #303133;
  font-weight: 500;
}

.clearfix:before,
.clearfix:after {
  display: table;
  content: "";
}

.clearfix:after {
  clear: both;
}
</style>
